<template>
	<gui-page :customHeader="false">
		<view slot="gBody" class="gui-flex1">
			<view class="gui-list  gui-padding">
				<form @submit="submit">
					<view class="gui-list-items" @tap="huan">
						<view class="gui-list-body gui-border-b gui-flex">
							<view class="gui-list-title">
								<text class="gui-list-title-text">头像</text>
								<view class="gui-list-arrow-right my-left">
									<image class="gui-list-image ucenter-face-image" 
					:src="user.avatarUrl ? imgServer+user.avatarUrl : '../../static/logo.png'" mode="widthFix"
										style="width: 60rpx;height: 60rpx;overflow: hidden;"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label">姓名</text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" v-model="user.name" name="name"
								placeholder="请输入姓名" />
						</view>
						<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
					</view>
					<view class="gui-list-items">
						<view class="gui-list-body gui-border-b gui-flex gui-rows gui-space-between">
							<view class="gui-list-title-text">编号</view>
							<view class="gui-flex">
								<view class="gui-list-title-text"><text class="">{{user.user_no}}</text></view>
							</view>
						</view>
					</view>
					<!-- #ifdef APP-PLUS -->
					<view class="gui-list-items" @tap="er">
						<view class="gui-list-body gui-border-b gui-flex gui-rows gui-space-between">
							<view class="gui-list-title-text">二维码名片</view>
							<view class="gui-flex">
								<text class="gui-list-arrow-right gui-icons gui-list-title-text">&#xe601;</text>
							</view>
						</view>
					</view>
					<!-- #endif -->
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label">手机号</text>
						<view class="gui-form-body">
							<input v-if="user.phone" type="text" class="gui-form-input" disabled :value="user.phone" 
								placeholder="请输入手机号" />
							<input v-else type="number" class="gui-form-input" name='phone' 
								placeholder="请输入手机号" />
						</view>
						<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
					</view>
					<view class="gui-form-item gui-border-b gui-flex gui-rows gui-space-between">
						<view class="gui-form-label">性别</view>
						<view class="gui-form-body">
							<picker mode="selector" :range="gender" @change="genderChange" name="gender">
								<view class="gui-flex gui-rows gui-nowrap gui-justify-content-end">
									<text class="gui-text">{{gender[genderIndex]}}</text>
									<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
								</view>
							</picker>
						</view>
					</view>
					<view class="gui-form-item gui-border-b" @tap="open2">
						<text class="gui-form-label gui-color-gray">所在地区</text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input" :value="value2" disabled placeholder="请选择" />
						</view>
						<text class="gui-icons gui-form-icon gui-color-gray gui-text-right">&#xe603;</text>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label">详细地址</text>
						<view class="gui-form-body">
							<input type="text" class="gui-form-input"  name="address" :value="user.address"
								placeholder="请输入地址" />
						</view>
						<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
					</view>
					
					<view class="tishi">
						<span>温馨提示：</span> 请完善信息，资料不全将无法购买产品！
					</view>
					
					<view class="gui-margin-top-large gui-flex gui-rows gui-nowrap gui-justify-content-center">
						<button type="default" class="gui-button" style="width:500rpx;border-radius: 20rpx;background-color: #00aaff;" formType="submit">
							<text class="gui-icons gui-color-white gui-button-text">提交</text>
						</button>
					</view>
					<gui-area-picker ref="graceAddressPicker2" @confirm="confirm2" :value="default2"
						></gui-area-picker>
					<view style="height:80rpx;"></view>
				</form>
			</view>
		</view>

	</gui-page>
</template>
<script>
	let graceJS = require('@/lizhili/js/grace.js');
	let common = require('@/common.js');
	var graceChecker = require("@/lizhili/js/checker.js");
	export default {
		data() {
			return {
				user: {},
				imgServer:'',
				gender : ['未知', '男', '女'],
				genderIndex : 0,
				value2: '',
				sheng:'',
				shi:'',
				xian:'',
				default2:[]
			};
		},
		onLoad: function() {
			this.imgServer=common.imgServer
		},
		onShow() {
			uni.common.post(
				uni.common.apiServer + 'my',
				{
					type: 'get_my_info',
				},
				false,
				res => {
					if (res.code == 1) {
						this.genderIndex=res.data.gender
						this.value2=res.data.sheng_html
						if(res.data.sheng_html){
							this.default2=res.data.sheng_html.split(',');
						}
						this.user=res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取数据失败'
						});
					}
				},
				e => {
					console.log(e);
				}
			);
		},
		methods: {
			huan(){
				uni.navigateTo({
					url: './caijian'
				});
			},
			er(){
				uni.navigateTo({
					url:'friend'
				})
			},
			submit: function(e) {
				var rule = [{
						name: "name",
						checkType: "string",
						checkRule: "1,10",
						errorMsg: "姓名应为1-10个字符"
					},
					{
						name: "address",
						checkType: "text",
						checkRule: "5,20",
						errorMsg: "请填写地址"
					}
				];
				//进行表单验证 e.detail.value 内存放着表单数据
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					if(!this.value2){
						uni.showToast({
							title: '请选择地区',
							icon: "none"
						});
						return
					}
					if(!this.genderIndex){
						uni.showToast({
							title: '请选择性别',
							icon: "none"
						});
						return
					}
					//绑定手机号
					if(!formData.phone && !this.user.phone){
						uni.showToast({
							title: '请填写手机号',
							icon: "none"
						});
						return
					}
					uni.common.post(
						uni.common.apiServer + 'my',
						{
							type: 'update_my_info',
							info: JSON.stringify(formData),
							sheng:this.sheng,
							shi:this.shi,
							xian:this.xian,
							sheng_html:this.value2,
							gender:this.genderIndex
						},
						false,
						res => {
							if (res.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '修改成功'
								});
								setTimeout(()=>{
									uni.navigateBack()
								},1000)
							} else {
								uni.showToast({
									icon: 'none',
									title: '获取数据失败'
								});
							}
						},
						e => {
							console.log(e);
						}
					);
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}

			},

			genderChange: function(e) {
				this.genderIndex    = e.detail.value;
			},
			open2: function() {
				this.$refs.graceAddressPicker2.open();
			},
			confirm2: function(e) {
				this.value2 = e.names[0] + ',' + e.names[1] + ',' + e.names[2];
				this.sheng=e.codes[0]
				this.shi=e.codes[1]
				this.xian=e.codes[2]
			},
		}
	};
</script>
<style>
	.tishi span{
		color: #ff3730;
	}
	.tishi{
		margin-top: 60rpx;
		font-size: 14px;
		line-height: 1.6;
		color: #999999;
	}
	.my-left {
		margin-left: 500rpx;
	}

	.my-left1 {
		margin-left: 430rpx;
	}

	.my-left2 {
		margin-left: 20rpx;
	}

	.my-left3 {
		margin-left: 380rpx;
		margin-top: 7rpx;
	}

	.my-left4 {
		margin-left: 330rpx;
	}

	.ucenter-face {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-face-image {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-line {
		height: 20rpx;
		background-color: #f6f7f8;
		margin: 16rpx 0;
	}

	.logoff {
		line-height: 88rpx;
		font-size: 28rpx;
	}

	.gui-list-title-text {
		line-height: 60rpx;
	}

	.gui-form-item {
		padding-left: 25rpx;
	}

	.gui-form-body {
		text-align: right;
	}
</style>
